<template>
  <div class="scene-overview-container">
    <!-- 顶部统计和搜索区域 -->
    <div class="page-header">
      <div class="header-content">
        <h2>场景总数（18）</h2>
      </div>
    </div>

    <!-- 摘要卡片区域 -->
    <div class="stats-section">
      <div class="flex5">
        <div class="flex5-item" v-for="item in summaryCards" :key="item.label">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-label">{{ item.label }}</div>
              <div class="stat-number">{{ item.value }}</div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="summary-cards" v-if="false">
      <div
        class="summary-card"
        v-for="(card, index) in summaryCards"
        :key="index"
      >
        <div class="card-icon">
          <el-icon><DataBoard /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-value">{{ card.value }}</div>
          <div class="card-label">{{ card.label }}</div>
        </div>
      </div>
    </div>

    <div class="content-wrapper">
      <div class="filter-section">
        <el-form :model="filterForm" inline>
          <el-form-item label="场景">
            <el-input
              v-model="filterForm.searchKeyword"
              placeholder="查找场景"
              clearable
            />
          </el-form-item>

          <el-form-item label="类型">
            <el-select
              v-model="filterForm.selectedType"
              placeholder="请选择类型"
              clearable
              class="type-select"
            >
              <el-option label="全部类型" value="" />
              <el-option label="工控测试环境" value="industrial" />
              <el-option label="生产仿真环境" value="production" />
              <el-option label="应急演练场景" value="emergency" />
              <el-option label="数据库区隔离" value="database" />
              <el-option label="主控系统防护" value="control" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 场景列表表格 -->
      <div class="table-section">
        <el-table :data="filteredScenarios" style="width: 100%" stripe>
          <el-table-column prop="id" label="序号" width="80" align="center" />
          <el-table-column prop="name" label="场景名称" min-width="180" />
          <el-table-column
            prop="deviceCount"
            label="设备数"
            width="100"
            align="center"
          />
          <el-table-column
            prop="busCount"
            label="总线数"
            width="100"
            align="center"
          />
          <el-table-column
            prop="vulnerabilityCount"
            label="漏洞数"
            width="100"
            align="center"
          />
          <el-table-column label="总线/攻击技术" min-width="200" align="center">
            <template #default="scope">
              <div class="tech-tags">
                <el-tag size="small" type="primary">{{
                  scope.row.busType
                }}</el-tag>
                <el-tag size="small" type="warning">{{
                  scope.row.attackTech
                }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="snapshotTime"
            label="快照时间"
            width="180"
            align="center"
          />
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50]"
            :total="totalItems"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { DataBoard } from "@element-plus/icons-vue";

// 搜索和过滤
const filterForm = ref({ searchKeyword: "", selectedType: "" });
const searchKeyword = ref("");
const selectedType = ref("");

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);

// 摘要卡片数据
const summaryCards = ref([
  { value: "20", label: "工控测试环境" },
  { value: "18", label: "生产仿真环境" },
  { value: "16", label: "应急演练场景" },
  { value: "15", label: "数据库区隔离" },
  { value: "14", label: "主控系统防护" },
]);

// 场景数据
const scenarios = ref([
  {
    id: 1,
    name: "工控测试环境",
    deviceCount: 8,
    busCount: 3,
    vulnerabilityCount: 2,
    busType: "Modbus",
    attackTech: "横向渗透",
    snapshotTime: "2024-06-01 10:23",
  },
  {
    id: 2,
    name: "生产仿真环境",
    deviceCount: 12,
    busCount: 4,
    vulnerabilityCount: 5,
    busType: "PROFINET",
    attackTech: "命令注入",
    snapshotTime: "2024-06-01 09:15",
  },
  {
    id: 3,
    name: "应急演练场景",
    deviceCount: 6,
    busCount: 2,
    vulnerabilityCount: 1,
    busType: "Ethernet/IP",
    attackTech: "数据窃取",
    snapshotTime: "2024-06-01 08:45",
  },
  {
    id: 4,
    name: "数据库区隔离",
    deviceCount: 10,
    busCount: 3,
    vulnerabilityCount: 3,
    busType: "OPC UA",
    attackTech: "权限提升",
    snapshotTime: "2024-06-01 07:30",
  },
  {
    id: 5,
    name: "主控系统防护",
    deviceCount: 15,
    busCount: 5,
    vulnerabilityCount: 4,
    busType: "DNP3",
    attackTech: "拒绝服务",
    snapshotTime: "2024-06-01 06:20",
  },
  {
    id: 6,
    name: "网络隔离测试",
    deviceCount: 7,
    busCount: 2,
    vulnerabilityCount: 2,
    busType: "IEC 61850",
    attackTech: "中间人攻击",
    snapshotTime: "2024-06-01 05:10",
  },
  {
    id: 7,
    name: "安全审计环境",
    deviceCount: 9,
    busCount: 3,
    vulnerabilityCount: 3,
    busType: "BACnet",
    attackTech: "SQL注入",
    snapshotTime: "2024-06-01 04:05",
  },
  {
    id: 8,
    name: "入侵检测测试",
    deviceCount: 11,
    busCount: 4,
    vulnerabilityCount: 6,
    busType: "LonWorks",
    attackTech: "缓冲区溢出",
    snapshotTime: "2024-06-01 03:15",
  },
  {
    id: 9,
    name: "防火墙配置验证",
    deviceCount: 8,
    busCount: 2,
    vulnerabilityCount: 1,
    busType: "KNX",
    attackTech: "会话劫持",
    snapshotTime: "2024-06-01 02:30",
  },
  {
    id: 10,
    name: "加密通信测试",
    deviceCount: 13,
    busCount: 4,
    vulnerabilityCount: 2,
    busType: "ZigBee",
    attackTech: "重放攻击",
    snapshotTime: "2024-06-01 01:45",
  },
  {
    id: 11,
    name: "身份认证验证",
    deviceCount: 6,
    busCount: 2,
    vulnerabilityCount: 1,
    busType: "WiFi",
    attackTech: "暴力破解",
    snapshotTime: "2024-06-01 00:20",
  },
  {
    id: 12,
    name: "日志分析环境",
    deviceCount: 14,
    busCount: 5,
    vulnerabilityCount: 4,
    busType: "Bluetooth",
    attackTech: "社会工程学",
    snapshotTime: "2024-05-31 23:10",
  },
]);

// 过滤后的场景数据
const filteredScenarios = computed(() => {
  let filtered = scenarios.value;

  // 关键词搜索
  if (searchKeyword.value) {
    filtered = filtered.filter(
      (scenario) =>
        scenario.name
          .toLowerCase()
          .includes(searchKeyword.value.toLowerCase()) ||
        scenario.busType
          .toLowerCase()
          .includes(searchKeyword.value.toLowerCase()) ||
        scenario.attackTech
          .toLowerCase()
          .includes(searchKeyword.value.toLowerCase())
    );
  }

  // 类型过滤
  if (selectedType.value) {
    const typeMap = {
      industrial: "工控测试环境",
      production: "生产仿真环境",
      emergency: "应急演练场景",
      database: "数据库区隔离",
      control: "主控系统防护",
    };
    filtered = filtered.filter(
      (scenario) => scenario.name === typeMap[selectedType.value]
    );
  }

  totalItems.value = filtered.length;
  return filtered;
});

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1;
  fetchData();
};

const resetFilter = () => {
  filterForm.title = "";
  filterForm.type = "";
  filterForm.status = "";
  currentPage.value = 1;
  handleSearch();
};

// 分页处理
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
};

// 页面初始化
onMounted(() => {
  totalItems.value = scenarios.value.length;
  console.log("场景概览页面已加载");
});
</script>

<style lang="scss" scoped>
.scene-overview-container {
  min-height: calc(100vh - 50px);
}

// 顶部统计和搜索区域
.top-section {
  margin-bottom: 30px;

  .stats-section {
    display: flex;
    align-items: center;
    gap: 40px;

    .total-scenarios {
      h2 {
        margin: 0 0 10px 0;
        color: var(--text-color);
        font-size: 18px;
        font-weight: 600;
      }

      .total-number {
        font-size: 36px;
        font-weight: bold;
        color: var(--text-color);
        line-height: 1;
      }
    }
  }
}

// 摘要卡片区域
.summary-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 30px;

  .summary-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;

    .card-icon {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      background: linear-gradient(135deg, #5cb3ff, #3b82f6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
    }

    .card-content {
      flex: 1;

      .card-value {
        font-size: 28px;
        font-weight: bold;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
      }

      .card-label {
        font-size: 14px;
        color: var(--text-color-secondary);
      }
    }
  }
}

// 表格卡片
.table-card {
  .card-header {
    font-weight: 600;
    color: var(--text-color);
  }

  .tech-tags {
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  .pagination-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--el-border-color-lighter);
  }
}
.content-wrapper {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

.table-section {
  padding: 20px;
}
.flex5{
  display: flex;
  justify-content: space-between; 
  gap: 20px; 
  .flex5-item{
    width: 230px;
  }
}
</style>
